/**
 * 语言切换
 */
import { FC, useEffect, useState } from "react";
import { observer, inject } from "mobx-react";
import { Dropdown, Typography } from "antd";
import type { MenuProps } from 'antd';
import { TranslationOutlined } from "@ant-design/icons";
import { ITStore } from "../../store";
import "./lang.less";

type TProp = {
  store: ITStore;
};

const { Text } = Typography;

const Langbox: FC<TProp | any> = ({ store }: TProp): JSX.Element => {
  const {
    languageStore: { changeLangCur, changeLang, langCur },
  } = store;

  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);

  useEffect(() => {
    setSelectedKeys([langCur]);
  }, [langCur]);

  const onClick: MenuProps["onClick"] = (e) => {
    const { key, keyPath } = e;
    setSelectedKeys(keyPath);
    changeLangCur(key);
    changeLang();
  };

  const items: MenuProps["items"] = [
    {
      label: (
        <>
          <Text className="lshort">CN</Text>
          <Text>简体中文</Text>
        </>
      ),
      key: "zhcn",
    },
    {
      label: (
        <>
          <Text className="lshort">EN</Text>
          <Text>English</Text>
        </>
      ),
      key: "en",
    },
  ];

  const menu = {
    items,
    onClick,
    selectedKeys
  }

  return (
    <Dropdown menu={menu}>
      <div className="langcnt">
        <TranslationOutlined />
      </div>
    </Dropdown>
  );
};

export default inject("store")(observer(Langbox));
